<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover"
    />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="stylesheet" href="./css/index.css"/>
    <link rel="stylesheet" href="./css/animate.css"/>
    <title>新年贺卡</title>

    <script>
      (function (win, doc) {
        if (!win.addEventListener) return
        var html = document.documentElement

        function setFont () {
          var html = document.documentElement
          console.log(html.clientWidth, '宽度')
          // 配置html字体rem
          // 50px  = 1rem 在根元素（html font-size = 50px的时候）
          var k = 750
          html.style.fontSize = (html.clientWidth / k) * 100 + 'px'
        }

        setFont()
        setTimeout(function () {
          setFont()
        }, 300)
        doc.addEventListener('DOMContentLoaded', setFont, false)
        win.addEventListener('resize', setFont, false)
        win.addEventListener('load', setFont, false)
      })(window, document)
    </script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .mod_loading .content .progress span {
            -webkit-transition: width 0.4s linear;
        }

        .musicPic {
            position: absolute;
            width: 0.6rem;
            right: 0.2rem;
            top: 1.1rem;
            z-index: 199;
            animation: roteg 2s linear infinite;
        }

        .musicPic1 {
            position: absolute;
            width: 0.6rem;
            right: 0.2rem;
            top: 1.1rem;
            z-index: 199;
        }

        @keyframes roteg {
            100% {
                transform: rotate(360deg) translateZ(100px);
            }
        }
    </style>
</head>

<body class="bodybox">
<div class="loding">
    <div>loading...</div>
</div>
<div class="wrap" id="wrap" style="display: none;">
    <div class="item item-1">
        <div class="box">
            <img
                    src="./image/36.jfif"
                    alt=""
                    style="width: 100%;height:100%;position: absolute;"
            />
            <img
                    src="./image/dl.png"
                    alt=""
                    style="display: none;"
                    class="delo"
            />
            <img src="./image/Bg2.png" alt="" class="bg2"/>
            <img
                    src="./image/ggd.gif"
                    alt=""
                    style="position: absolute;width: 100%;"
            />
            <div class="shu">
                <img src="./image/54.png" alt=""/>
                <img src="./image/spring.png" alt="" id="imgh"/>
            </div>
            <!--          <img src="./image/wushi.png" alt="" class="shi" />-->
            <img
                    src="./image/ggd.gif"
                    alt=""
                    style="position: absolute;width: 100%;height: 100%;"
            />
            <div class="topl" style="display: none;">
                <img src="./image/1.png" alt="" id="top1"/>
                <img src="./image/2.png" alt=""/>
                <img src="./image/3.png" alt=""/>
            </div>
            <div class="btr" style="display: none;">
                <img src="./image/1.png" alt="" id="bt2"/>
                <img src="./image/2.png" alt=""/>
                <img src="./image/3.png" alt=""/>
            </div>
            <img src="./image/music.png" alt="" id="musicPic" class="musicPic"/>

            <div class="bottombox">
                <!-- <div style="font-size: .4rem;font-family: 楷体;">
                <span>金鼠贺岁</span>
                <span>庚子迎春</span>
              </div> -->
                <!--                <img src="./image/55(1).png" alt="" style="width: 50vw;"/>-->
            </div>
            <img src="merry/bottom_cow.png" id="cow"
                 style="position: absolute;bottom: 0;width: 130vw;transform: translateZ(110px) translateX(-50%);margin-left: 50%;"/>
            <img src="./image/arrow.png" alt="" class="arrow"/>
        </div>
    </div>

    <!-- 第二个 -->
    <div class="item item2" style="overflow: hidden;">
        <div id="main">
            <img src="./image/music.png" alt="" class="musicPic"/>
            <!--          <img-->
            <!--            src="./image/arrow.png"-->
            <!--            alt=""-->
            <!--            class="arrow"-->
            <!--            style="bottom: 13vh;"-->
            <!--          />-->
            <audio
                    style="height: 0"
                    id="bgmusic"
                    preload="auto"
                    src="./pic/pic/bg.mp3"
                    loop="loop"
            ></audio>
            <img class="imgBG" src="./image/bg.png" alt="" style="z-index: -20"/>
            <img src="./image/bgh(1).png" id="guajian" alt="" class="guajian" style="z-index: -10"/>
            <div class="delobox">

                <!--            <img src="./image/top(1).png" id="top" class="top" />-->
                <img src="./image/china.png" alt="" class="china"/>

                <img src="./image/top(1).png" alt="" class="top"/>
                <!-- 灯笼 -->
                <img class="dl" src="./image/delozu.png" alt=""/>

            </div>
            <div class="snow-container">
                <img src="./image/gold.png" alt="" class="jin1" id="jin"/>
                <img src="./image/gold.png" alt="" class="jin2" id="jin"/>
            </div>
            <!-- 底部标识log -->
            <div class="content" id="content">
                <!--                <div class="xiaojiebox">-->
                <!--                    <img src="./image/xiaojie.png" alt="" class="xi-l xiaojie"/>-->
                <!--                    <img src="./image/xiaojie.png" alt="" class="xi-r xiaojie"/>-->
                <!--                </div>-->

                <img src="./image/daji2.png" alt="" class="liunian"/>
                <!--                <img src="./image/daji(1).png" alt="" class="font"/>-->
                <img src="./image/cloud.png" alt="" class="cloud"/>
                <!--            <img-->
                <!--              src="./image/monse-cl.png"-->
                <!--              id="monsecl"-->
                <!--              alt=""-->
                <!--              class="footer"-->
                <!--            />-->
                <div class="zhufuyu">
                    <div style="text-align: start" id="name">张三祝您:</div>
                    <div style="max-width: 35vw;text-indent: 1.8em;text-align: start">
                        春节送上整个正月的祝福，初一开开心心初二幸幸福福，初三美美满满初四平平安安，初五健健康康，十五甜甜蜜蜜，正月都顺顺当当!给你拜年啦!
                    </div>
                </div>
            </div>
            <div class="bottombox">
                <!-- <div style="font-size: .4rem;font-family: 楷体;">
                <span>金鼠贺岁</span>
                <span>庚子迎春</span>
              </div> -->
                <img src="./image/55(1).png" alt="" style="width: 50vw;transform: translateZ(110px)"/>
            </div>

            <div id="newHK" class="newHK" style="transform: translateZ(200px);position: fixed;bottom: 20px">
                制作我的贺卡
            </div>
        </div>
    </div>
    <!-- 第三个页面 -->
    <!--      <div class="item item3" style="overflow: hidden;">-->
    <!--        <div class="centerzhu">-->
    <!--          <img src="./image/654.png" alt="">-->
    <!--        </div>-->
    <!--        <img src="./image/music.png" alt="" class="music_icon" />-->
    <!--        <img src="./image/biao.png" alt="" style="position: absolute;width: 100%;height: 100%;" />-->
    <!--        <img-->
    <!--          src="./image/ggd.gif"-->
    <!--          alt=""-->
    <!--          style="position: absolute;width: 100%;height: 100%;"-->
    <!--        />-->
    <!--        <img src="./image/treen.png" alt="" class="toptree" />-->
    <!--        <img src="./image/55.png" alt="" class="btlog">-->
    <!--      </div>-->
</div>

<script type="text/javascript" src="./js/iSlider.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
  var loader = function (complete) {
    //图片资源加载完毕才显示main
    var source = [
      'image/dl.png',
      'image/Bg2.png',
      'image/ggd.gif',
      'image/bgh(1).png',
      'image/log(1).png',
      'image/gongxi.png',
      'image/654.png',
      'image/wushi.png',
      'image/bg.png',
      'image/1.png',
      'image/2.png',
      'image/arrow.png',
      'image/treen.png',
      'image/guajian.png',
      'image/top.png',
      'image/china.png',
      'image/denglong.png',
      'image/xiaojie.png',
      'image/center.png',
      'image/daji(1).png',
      'image/daji2.png',
      'image/font.png',
      'image/fu.png',
      'image/cloud.png',
      'image/monse-cl.png',
    ]
    var count = 0

    load = function (o, f) {
      if (
        o.indexOf('.png') > -1 ||
        o.indexOf('.jpg') > -1 ||
        o.indexOf('.gif') > -1
      ) {
        var img = new Image()
        img.src = o
        img.onload = img.onerror = f
      }
    }

    for (var i = 0; i < source.length; i++) {
      load(source[i], function () {
        count++
        if (count == source.length) {
          complete()
        }
      })
    }
  }
  var loadComplete = () => {
    $('.loding').hide()
    $('#wrap').show()
  }
  loader(loadComplete)

  var addAnimate = function (flag) {
    if (flag) {
      $('#top').addClass('bounceInDown animated')
      $('#monsecl').addClass('bounceInUp animated')
      $('#newHK').addClass('bounceInUp animated')
      $('#guajian').addClass('rubberBand animated')
      $('#content').addClass('bounceIn animated')
      setTimeout(function () {
        // $("#monsecl").removeClass("bounceInUp animated");
        // $("#monsecl").addClass("pulse animated infinite");
      }, 600)
    } else {
      $('#top').removeClass('bounceInDown animated')
      // $("#monsecl").removeClass("bounceInUp animated");
      // $("#monsecl").removeClass("pulse animated infinite");
      $('#newHK').removeClass('bounceInUp animated')
      $('#guajian').removeClass('rubberBand animated')
      $('#content').removeClass('bounceIn animated')
    }
  }
  var myslider = new iSlider({
    index: 0,
    loadingImgs: [],
    onloading: function (complete, total) {

    },
    onslide: function (index) {
      console.log(document.getElementById('bgmusic'))
      if (index == 0) {
        $('.btr').fadeIn(1200)
        $('.topl').fadeIn(1200)
      }
      if (index == 1) {
        addAnimate(true)
        $('.jin1').show()
        $('.jin2').show()
        $('.jin1').addClass('snow_an')
        $('.jin2').addClass('snow_bn')
      } else {
        addAnimate(false)
        $('.jin1').removeClass('snow_an')
        $('.jin2').removeClass('snow_bn')
      }
    },
  })

  //微信自动播放
  document.addEventListener(
    'WeixinJSBridgeReady',
    function () {
      document.getElementById('bgmusic').play()
    },
    false,
  )

  $(function () {
    var num = 0
    $('#bgmusic').on('pause', function () {
      console.log('pause')
      if (document.getElementById('bgmusic').paused) {
        $('.musicPic').addClass('musicPic1')
        $('.musicPic').removeClass('musicPic')
      } else {
        $('.musicPic1').addClass('musicPic')
        $('.musicPic1').removeClass('musicPic1')

      }
    })
    $('#bgmusic').on('play', function () {
      console.log('play')
      if (document.getElementById('bgmusic').paused) {
        $('.musicPic').addClass('musicPic1')
        $('.musicPic').removeClass('musicPic')
      } else {
        $('.musicPic1').addClass('musicPic')
        $('.musicPic1').removeClass('musicPic1')

      }
    })
    $('.musicPic').on('touchstart', function () {
      num++
      if (document.getElementById('bgmusic').paused) {
        $(this).addClass('musicPic')
        $(this).removeClass('musicPic1')
        document.getElementById('bgmusic').muted = false
        document.getElementById('bgmusic').play()
      } else {
        $(this).addClass('musicPic1')
        $(this).removeClass('musicPic')
        document.getElementById('bgmusic').muted = true
        document.getElementById('bgmusic').pause()
      }

    })
    let schoolCode = getQueryString('s') || getSchoolCode() || '3300000'
    $('#newHK').click(function () {
      let origin = window.location.origin
      window.location.href = origin + '/#/greeting/create?s=' + schoolCode
    })
    $('#jin').on('webkitAnimationEnd', function () {
      console.log('结束')
      $('.jin1').hide()
      $('.jin2').hide()
    })
    $('.bg2').on('webkitAnimationEnd', function () {
      $('.topl').fadeIn(500)
      $('.btr').fadeIn(500)
      $('.delo').fadeIn(100)
    })
    document.body.addEventListener(
      'touchmove',
      function (e) {
        e.preventDefault() //阻止默认的处理方式(阻止下拉滑动的效果)
      },
      {
        passive: false,
      },
    ) //passive 参数不能省略，用来兼容ios和android

  })

</script>
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
<script type="text/javascript">
  function set (key, token) {
    if (token) {
      localStorage.setItem(key, token)
    } else {
      localStorage.removeItem(key)
    }
  }

  function get (key) {
    const token = localStorage.getItem(key)
    if (token && token !== 'null' && token !== 'undefined') {
      return token
    } else {
      return undefined
    }
  }

  const TOKEN_KEY = 'token'
  const OPEN_ID_KEY = 'wdd_open_id'
  const APP_ID_KEY = 'wdd_app_id'
  const SCHOOL_KEY = 's'

  setToken = token => {
    set(TOKEN_KEY, token)
  }

  getToken = () => {
    return get(TOKEN_KEY)
  }

  setOpenId = openId => {
    set(OPEN_ID_KEY, openId)
  }
  getOpenId = () => {
    return get(OPEN_ID_KEY)
  }

  getToken = () => {
    return get(TOKEN_KEY)
  }

  setAppId = openId => {
    set(APP_ID_KEY, openId)
  }

  getAppId = () => {
    return get(APP_ID_KEY)
  }
  setSchoolCode = schoolCode => {
    set(SCHOOL_KEY, schoolCode)
  }

  getSchoolCode = () => {
    return get(SCHOOL_KEY)
  }

  function getQueryString (name) {
    let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
    let r = window.location.search.substr(1).match(reg)
    if (r != null) return unescape(r[2])
    return null
  }

  //setOpenId("ogqzzt3grJAUiy6uPsbFNtCYSI9g")
  //setSchoolCode("3300000")

  let code = getQueryString('code')
  let schoolCode = getQueryString('s') || getSchoolCode() || '3300000'

  //3 先从url获取school_code,若school_code与localStorage不一致,应清空open_id/appId
  if (schoolCode && schoolCode !== getSchoolCode()) {
    setOpenId(undefined)
  }
  axios.defaults.baseURL = window.location.origin
  axios.defaults.transformRequest = [
    function (data) {
      return window.Qs.stringify(data)
    }]
  let replaceParamVal = function (oUrl, paramName, replaceWith) {
    let re = eval('/(' + paramName + '=)([^&]*)/gi')
    return oUrl.replace(re, paramName + '=' + replaceWith)
  }
  let deleteParamVal = function (oUrl, paramName) {
    let re = eval('/(' + paramName + '=)([^&]*)/gi')
    return oUrl.replace(re,"")
  }
  function configWxShare () {
    new Promise(function (resolve) {
      // axios({
      //   url: '/data_import/greetingCard/getWxName',
      //   method: 'post',
      //   headers: {
      //     'Content-Type': 'application/x-www-form-urlencoded',
      //   },
      // }).then((res) => {
      //   console.log(res)
      //   let name = $('#name').text().replace(':', '')
      //   resolve(`${res.data.data || name}给您发来了新春祝福`)
      // }).catch((err) => {
      //   console.log(err)
      //   let name = $('#name').text().replace(':', '')
      //   resolve(`${name}给您发来了新春祝福`)
      // })
      let name = $('#name').text().replace('祝您:', '')
      resolve(`${name}给您发来了新春祝福`)
    }).then(title => {
      window.document.title = title
      let img = window.location.origin + '/logo_red.png'
      let url = deleteParamVal(window.location.href,"code")
      wx.updateAppMessageShareData({
        title: title, // 分享标题
        desc: title, // 分享描述
        link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: img, // 分享图标
      })
      wx.updateTimelineShareData({
        title: title, // 分享标题
        desc: title,
        link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: img, // 分享图标
      })
      wx.onMenuShareTimeline({
        title: title,
        link: url,
        imgUrl: img,
      })
      wx.onMenuShareAppMessage({
        title: title,
        desc: title,
        link: url,
        imgUrl: img,
      })
      wx.onMenuShareQQ({
        title: title,
        desc: title,
        link: url,
        imgUrl: img,
      })
      wx.onMenuShareWeibo({
        title: title,
        desc: title,
        link: url,
        imgUrl: img,
      })
      wx.onMenuShareQZone({
        title: title,
        desc: title,
        link: url,
        imgUrl: img,
      })
    })
  }

  new Promise((resolve, reject) => {
    if (code) {
      axios({
        url: '/index.php/Mobile/GetWxArgument/getToken',
        data: {
          code: code,
          s: schoolCode,
        },
        method: 'post',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      }).then((res) => {
        console.log('getTokenByCode', res)
        setOpenId(res.data.data.open_id)
        resolve()
      }).catch(err => {
        reject(err)
      })
    } else {
      let openId = getOpenId()
      if (!openId) {
        axios({
          url: '/index.php/Mobile/GetWxArgument/getWxconfig',
          data: {
            s: schoolCode,
          },
          method: 'post',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
        }).then((res) => {
          console.log('getAppId', res)
          window.location.href =
            'http://open.weixin.qq.com/connect/oauth2/authorize?appid=' + res.data.data.appid + '&redirect_uri=' +
            encodeURIComponent(window.location.href) +
            '&response_type=code&scope=snsapi_base&state=123#wechat_redirect'
          setAppId(res.data.data.appid)
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      } else {
        //第二次进入时
        axios({
          url: '/index.php/Mobile/GetWxArgument/getToken',
          data: {
            open_id: openId,
            s: schoolCode,
          },
          method: 'post',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
        }).then((res) => {
          console.log('getTokenByOpenId', res)
          resolve()
        }).catch(err => {
          reject(err)
        })
      }
    }
  }).then(res => {
    axios({
      url: '/index.php/Mobile/Public/getUrlToWxConfig',
      data: {
        url: window.location.href.split("#")[0]//window.location.protocol + '//' + window.location.host + window.location.pathname,
      },
      method: 'post',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    }).then(res => {
      wx.config({
        //debug: true,
        appId: localStorage.getItem('wdd_app_id'),
        timestamp: res.data.data.timestamp,
        nonceStr: res.data.data.nonceStr,
        signature: res.data.data.signature,
        jsApiList: [
          'closeWindow',
          'chooseImage',
          'uploadImage',
          'updateAppMessageShareData',
          'updateTimelineShareData',
          'onMenuShareTimeline',
          'onMenuShareAppMessage',
          'onMenuShareQQ',
          'onMenuShareWeibo',
          'onMenuShareQZone',
          'openLocation',
          'getLocation',
          'updateAppMessageShareData',
          'updateTimelineShareData',
          'onMenuShareTimeline',
          'onMenuShareAppMessage',
        ],
      })

      wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        //window.alert(JSON.stringify(res))
        configWxShare()
      })

      wx.ready(function () {
        configWxShare()
      })
    }).catch(err=>{
      console.log(err)
      configWxShare()
    })
  }).catch(err => {
    console.log(err)
    configWxShare()
  })


</script>
<style>
    .content .zhufuyu {
        position: absolute;
        top: 38%;
        font-size: 0.6em;
        font-family: 楷体;
        color: rgb(232, 207, 133);
        font-weight: bold;
        width: 50%;
        margin: 0 25%;
        text-align: center;
        text-indent: 1.4em;
    }

    .content .cloud {
        position: absolute;
        width: 0.8rem;
        top: 3.6rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .liunian {
        position: absolute;
        width: 80%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    @keyframes bounceInUp {
        0%, 60%, 75%, 90%, 100% {
            -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }

        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, 3000px, 120px);
            transform: translate3d(0, 3000px, 120px);
        }

        60% {
            opacity: 1;
            -webkit-transform: translate3d(0, -20px, 120px);
            transform: translate3d(0, -20px, 120px);
        }

        75% {
            -webkit-transform: translate3d(0, 10px, 120px);
            transform: translate3d(0, 10px, 120px);
        }

        90% {
            -webkit-transform: translate3d(0, -5px, 120px);
            transform: translate3d(0, -5px, 120px);
        }

        100% {
            -webkit-transform: translate3d(0, 0, 120px);
            transform: translate3d(0, 0, 120px);
        }
    }

    .bounceInUp {
        -webkit-animation-name: bounceInUp;
        animation-name: bounceInUp;
    }

    .china {
        position: absolute;
        top: 1.3rem;
        width: 8vh;
        left: 50%;
        -webkit-animation: flip2 3s linear infinite backwards;
        animation: flip2 3s linear infinite backwards;
        z-index: 2;
    }

    .xiaojiebox .xiaojie {
        width: 0.7rem;
        height: 0.5rem;
        -webkit-animation: flip 2s linear infinite backwards;
        animation: flip 2s linear infinite backwards;
    }

    @keyframes flip {
        0% {
            transform: perspective(400px) translate3d(0, 0, 10px) rotate3d(0, 20, 0, -360deg);
            animation-timing-function: linear;
        }


        50% {
            transform: perspective(400px) translate3d(0, 0, 10px) rotate3d(0, 20, 0, -180deg);
            animation-timing-function: linear;
        }

        /*80% {*/
        /*  -webkit-transform: perspective(400px) scale3d(.95, .95, .95);*/
        /*  transform: perspective(400px) scale3d(.95, .95, .95);*/
        /*  -webkit-animation-timing-function: ease-in;*/
        /*  animation-timing-function: ease-in;*/
        /*}*/

        100% {
            transform: perspective(400px) translate3d(0, 0, 10px) rotate3d(0, 20, 0, 0deg);
            animation-timing-function: linear;
        }
    }

    @keyframes flip2 {
        0% {
            transform: perspective(400px) translate3d(-50%, 0, 0px) rotate3d(0, 20, 0, -360deg);
            animation-timing-function: linear;
        }


        50% {
            transform: perspective(400px) translate3d(-50%, 0, 0px) rotate3d(0, 20, 0, -180deg);
            animation-timing-function: linear;
        }


        100% {
            transform: perspective(400px) translate3d(-50%, 0, 0px) rotate3d(0, 20, 0, 0deg);
            animation-timing-function: linear;
        }
    }

    @keyframes rote {
        0% {
            transform: rotateY(0deg) perspective(100px);
        }
        100% {
            /*-webkit-transform: rotate3d(0, 20, 0, 365deg);*/
            transform: rotateY(365deg) perspective(100px);
        }
    }

    @keyframes routates {
        40% {
            transform: translate3d(0, 0, 0) rotate(10deg);
        }

        100% {
            transform: translate3d(0, 0, 0) rotate(-10deg);
        }
    }

    .top {
        position: absolute;
        width: 100%;
        z-index: 6;
        transform: translateZ(100px);
    }

    .dl {
        position: absolute;
        width: 90%;
        left: 50%;
        top: 0;
        transform: translateX(-50%) translateZ(100px);
        z-index: 102;
    }

</style>
</body>
</html>
